<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>专业信息</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
<table class="layui-table" lay-data="{height: 'full-200', cellMinWidth: 80, page: true, limit:10,url:'resources/json/course.json', id:'demo',toolbar: '#toolbarDemo',defaultToolbar: ['filter', 'exports', 'print'
,{
      title: '增加'
      ,layEvent:'LAYTABLE_ADD'
      ,icon: 'layui-icon-addition'
    }]}" lay-filter="demo">
 <thead>
    <tr>
      <th lay-data="{type:'checkbox', fixed: 'left'}">课程号</th>
      <th lay-data="{field:'cno', align:'center',sort:true,edit:'text'}">课程号</th>
      <th lay-data="{field:'cName',align:'center',edit:'text'}">课程名</th>
      <th lay-data="{field:'tno',align:'center',edit:'text'}">教师编号</th>
      <th lay-data="{field:'mn',align:'center',edit:'text'}">最大选课人数</th>
      <th lay-data="{field:'cn',align:'center',edit:'text'}">选课人数</th>
      <th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}"></th>
    </tr>
  </thead>
</table> 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
 <script src="resources/layui/layui.js"></script>
<script>
layui.use('table', function(){
    var table = layui.table;
  //监听表格复选框选择
    table.on('checkbox(demo)', function(obj){
      console.log(obj)
    });
  //监听工具条
    table.on('tool(demo)', function(obj){
      var data = obj.data;
      if(obj.event === 'del'){
        layer.confirm('真的删除行么', function(index){
          obj.del();
          layer.close(index);
        });
      }
    });
  //监听单元格编辑
  table.on('edit(demo)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
    });
  $('.demoTable .layui-btn').on('click', function(){
	    var type = $(this).data('type');
	    active[type] ? active[type].call(this) : '';
	  });
});


</script>
</body>
</html>
